<template>
    <div
      id="main"
      style="width:50%;height:400px;border: 1px dashed gray"
    >
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  export default {
    mounted() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
  
      myChart.showLoading()
      this.$http
        //   .get('http://geo.datav.jiasiyuan.cn/140000_full.json')
        .get('http://127.0.0.1:3000/map')
        .then((res) => {
          console.log(res)
          myChart.hideLoading()
          echarts.registerMap('shanxi', res.data[0])
          myChart.setOption(
            (option = {
              title: {
                text: '山西省疫情情况',
                subtext: '来源：阿里健康'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c}例'
              },
              toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                  dataView: { readOnly: false },
                  restore: {},
                  saveAsImage: {}
                }
              },
              visualMap: {
                min: 1,
                max: 30,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                  color: ['pink', 'orangered', 'red']
                }
              },
              series: [
                {
                  name: '山西省疫情情况',
                  type: 'map',
                  map: 'shanxi',
                  label: {
                    show: true
                  },
                  zoom:1,
                  roam:true,
                  scaleLimit:{
                    min:1,
                    max:10
                  },
                  data: [
                    { name: '太原市', value: 2 },
                    { name: '大同市', value: 18 },
                    { name: '忻州市', value: 27 },
                    { name: '运城市', value: 2 },
                    { name: '晋中市', value: 4 },
                    { name: '吕梁市', value: 1 },
                    { name: '朔州市', value: 0 },
                    { name: '晋城市', value: 1 },
                    { name: '阳泉市', value: 0 },
                    { name: '临汾市', value: 0 },
                    { name: '长治市', value: 0 }
                  ],
                  // 自定义名称映射
                  nameMap: {
                    'Central and Western': '中西区',
                    Eastern: '东区',
                    Islands: '离岛',
                    'Kowloon City': '九龙城',
                    'Kwai Tsing': '葵青',
                    'Kwun Tong': '观塘',
                    North: '北区',
                    'Sai Kung': '西贡',
                    'Sha Tin': '沙田',
                    'Sham Shui Po': '深水埗',
                    Southern: '南区',
                    'Tai Po': '大埔',
                    'Tsuen Wan': '荃湾',
                    'Tuen Mun': '屯门',
                    'Wan Chai': '湾仔',
                    'Wong Tai Sin': '黄大仙',
                    'Yau Tsim Mong': '油尖旺',
                    'Yuen Long': '元朗'
                  }
                }
              ]
            })
          )
        })
      option && myChart.setOption(option)
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>